import React, { useRef } from 'react';
import { TransitionProps } from './interface';
import { CSSTransition } from 'react-transition-group';

/**
 * 为组件提供从无到有的动画效果
 * @param props 
 * @returns 
 */
const Transition: React.FC<TransitionProps> = (props) => {

    const { animation = 'zoom-in-top', children, classNames, ...restProps } = props;

    const ref = useRef(null);

    return (
        <CSSTransition
            classNames={classNames ?? animation}
            unmountOnExit
            nodeRef={ref}
            {...restProps}
        >
            <div ref={ref}>
                {children}
            </div>
        </CSSTransition>
    );
};

export default Transition;